<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../../../WEB-INF/plantilla/defecto.xhtml">
	<ui:define name="titulo">Administrar departamentos</ui:define>
	<ui:define name="contenido">
		<h1>Administrar departamentos</h1>
		<h:form>
			<!-- <p:panel header="Criterios de b&#250;squeda" toggleable="true"> -->
			<p:accordionPanel>
				<p:tab title="Criterios de b&#250;squeda">
					<div class="filas">
						<div class="mitad">
							<div class="completo">
								<div class="tercio">
									<h:outputLabel for="txtDescripcion" value="Descripci&#243;n:" />
								</div>
								<div class="dostercios">
									<div class="input">
										<p:inputText id="txtDescripcion" />
									</div>
									<div class="tooltip">
										<h:graphicImage id="imgDescripcion"
											url="../../../presentacion/images/help.png"></h:graphicImage>
										<p:tooltip for="imgDescripcion" value="Descripci&#243;n" />
									</div>
								</div>
								<p:message for="txtDescripcion" />
							</div>
							<div class="completo">
								<div class="tercio">
									<h:outputLabel for="cboEstado" value="Estado:" />
								</div>
								<div class="dostercios">
									<div class="combo">
										<p:selectOneMenu id="cboEstado" styleClass="selectOneMenu">
											<f:selectItem itemLabel="Todos" itemValue="" />
											<f:selectItem itemLabel="Option 1" itemValue="1" />
											<f:selectItem itemLabel="Option 2" itemValue="2" />
											<f:selectItem itemLabel="Option 3" itemValue="3" />
										</p:selectOneMenu>
									</div>
									<div class="tooltip">
										<h:graphicImage id="imgEstado"
											url="../../../presentacion/images/help.png"></h:graphicImage>
										<p:tooltip for="imgEstado" value="Rol" />
									</div>
								</div>
								<p:message for="cboEstado" />
							</div>
						</div>
						<div class="mitad">
							<div class="completo">
								<div class="tercio">
									<h:outputLabel for="txtCodigo" value="C&#243;digo:" />
								</div>
								<div class="dostercios">
									<div class="input">
										<p:inputText id="txtCodigo" />
									</div>
									<div class="tooltip">
										<h:graphicImage id="imgCodigo"
											url="../../../presentacion/images/help.png"></h:graphicImage>
										<p:tooltip for="imgCodigo" value="C&#243;digo" />
									</div>
								</div>
								<p:message for="txtCodigo" />
							</div>
						</div>
					</div>
					<div class="boton">
						<p:commandButton value="Buscar" icon="ui-icon-search" />
					</div>
					<div style="clear: both;"></div>
					<!-- </p:panel> -->
				</p:tab>
			</p:accordionPanel>
			<h2>Resultados</h2>
			<p:separator />

			<div class="opcionesTabla" style="text-align: left;">
				<p:commandButton value="Nuevo departamento" icon="ui-icon-plus"
					onclick="dlgNuevoDepartamento.show()" />
					<div style="clear: both;"></div>
			</div>

			<div class="scrollTabla">
				<p:dataTable paginator="true" paginatorPosition="bottom" rows="10"
					style="width: 100%" var="" value="">
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="Item" />
						</f:facet>
						<h:outputText value="001" />
					</p:column>
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="Editar" />
						</f:facet>
						<p:commandLink onclick="dlgEditarDepartamentos.show()">
							<h:outputText value="Editar" />
						</p:commandLink>
					</p:column>
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="Eliminar" />
						</f:facet>
						<p:commandLink
							onclick="confirm('Est&#225; seguro de que desea eliminar el departamento')">
							<h:outputText value="Eliminar" />
						</p:commandLink>
					</p:column>
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="C&#243;digo" />
						</f:facet>
						<h:outputText value="D001" />
					</p:column>
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="Descripci&#243;n" />
						</f:facet>
						<h:outputText value="Gesti&#243;n Comercial" />
					</p:column>
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="Estado" />
						</f:facet>
						<h:outputText value="Vigente" />
					</p:column>
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="Fecha Registro" />
						</f:facet>
						<h:outputText value="13/06/2011" />
					</p:column>
					<p:column styleClass="oficina">
						<f:facet name="header">
							<h:outputText value="Usuario" />
						</f:facet>
						<h:outputText value="GPEREZD" />
					</p:column>
					<f:facet name="footer">  
          			 Total registros 1  
        		</f:facet>
				</p:dataTable>
			</div>
			<div class="opcionesTabla" style="text-align: left;">
				<p:commandButton value="Exportar" icon="ui-icon-disk" />
			<div style="clear: both;"></div>
			</div>
		</h:form>

		<!-- DEPARTAMENTOS -->

		<p:dialog header="Agregar departamento"
			widgetVar="dlgNuevoDepartamento" modal="true" width="650"
			position="top">
			<h:form>
				<p:panel header="Datos del departamento" toggleable="false">
					<div class="filas">
						<div class="completo">
							<div class="tercio">
								<h:outputLabel for="txtDescripcion" value="Descripci&#243;n:" />
							</div>
							<div class="dostercios">
								<div class="input">
									<p:inputText id="txtDescripcion" />
								</div>
								<div class="tooltip">
									<h:graphicImage id="imgDescripcion"
										url="../../../presentacion/images/help.png"></h:graphicImage>
									<p:tooltip for="imgDescripcion" value="Descripci&#243;n" />
								</div>
							</div>
							<p:message for="txtDescripcion" />
						</div>
					</div>
					<div class="boton">
						<p:commandButton value="Agregar" icon="ui-icon-disk" />
					</div>
					<div style="clear: both;"></div>
				</p:panel>

				<div style="clear: both;"></div>
			</h:form>
		</p:dialog>
		
<p:dialog header="Editar departamento"
	widgetVar="dlgEditarDepartamentos" modal="true" width="750"
	position="top">
	<h:form>
		<p:panel header="Datos del departamento" toggleable="false">
			<div class="filas">
				<div class="mitad">
					<div class="completo">
						<div class="tercio">
							<h:outputLabel for="txtDescripcion" value="Descripci&#243;n:" />
						</div>
						<div class="dostercios">
							<div class="input">
								<p:inputText id="txtDescripcion" />
							</div>
							<div class="tooltip">
								<h:graphicImage id="imgDescripcion"
									url="../../../presentacion/images/help.png"></h:graphicImage>
								<p:tooltip for="imgDescripcion" value="Descripci&#243;n" />
							</div>
						</div>
						<p:message for="txtDescripcion" />
					</div>
				</div>
				<div class="mitad">
					<div class="completo">
						<div class="tercio">
							<h:outputLabel for="cboEstado" value="Estado:" />
						</div>
						<div class="dostercios">
							<div class="combo" style="width: 50%">
								<p:selectOneMenu id="cboEstado">
									<f:selectItem itemLabel="Todos" itemValue="" />
									<f:selectItem itemLabel="Option 1" itemValue="1" />
									<f:selectItem itemLabel="Option 2" itemValue="2" />
									<f:selectItem itemLabel="Option 3" itemValue="3" />
								</p:selectOneMenu>
							</div>
							<div class="tooltip">
								<h:graphicImage id="imgEstado"
									url="../../../presentacion/images/help.png"></h:graphicImage>
								<p:tooltip for="imgEstado" value="Rol" />
							</div>
						</div>
						<p:message for="cboEstado" />
					</div>

				</div>
			</div>
			<div class="boton">
				<p:commandButton value="Guardar" icon="ui-icon-disk" />
			</div>
			<div style="clear: both;"></div>
		</p:panel>

		<div style="clear: both;"></div>
	</h:form>
</p:dialog>
	</ui:define>

</ui:composition>